<template>
  <div>
    <a-drawer width="30%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
      <a-divider orientation="left">
        <b>{{ formTitle }}</b>
      </a-divider>
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="订单编码/订单合同号" prop="orderCode">
          <a-input v-model="form.orderCode" placeholder="请输入" @blur="checkSameOrderCode" />
        </a-form-model-item>
        <a-form-model-item label="客户" prop="customerId">
          <a-select
            v-model="form.customerId"
            show-search
            placeholder="请选择客户"
            style="width: 100%"
            allow-clear
            optionFilterProp="label"
          >
            <a-select-option
              :label="c.customerName"
              v-for="(c, index) in customers"
              :key="index"
              :value="c.customerId"
            >{{ c.customerName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="接单人">
          <a-select
            v-model="form.userId"
            show-search
            placeholder="请选择接单人"
            style="width: 100%"
            allow-clear
            optionFilterProp="label"
          >
            <a-select-option
              :label="u.nickName"
              v-for="(u, index) in users"
              :key="index"
              :value="u.userId"
            >{{ u.nickName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="总价" prop="totalPrice">
          <a-input-number
            v-model="form.totalPrice"
            :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
            :style="{ width: '300px' }"
          />
        </a-form-model-item>
        <a-form-model-item label="送货日期" prop="deliveryTime">
          <a-date-picker
            v-model="form.deliveryTime"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-input v-model="form.remark" placeholder="请输入" type="textarea" allow-clear />
        </a-form-model-item>
        <div class="bottom-control">
          <a-space>
            <a-button type="primary" @click="submitForm">保存</a-button>
            <a-button type="dashed" @click="cancel">取消</a-button>
          </a-space>
        </div>
      </a-form-model>
    </a-drawer>
    <a-modal title="订单合同号已存在" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <p>是否需要自动修改名字</p>
    </a-modal>
  </div>
</template>

<script>
import { getCustomerNames, getUserNames, updateOrder, addOrder, getOrder, checkOrderCode } from '@/api/erp/order'

export default {
  name: 'CreateForm',
  data () {
    return {
      formTitle: '',
      open: false,
      form: {
        orderCode: undefined,
        totalPrice: undefined,
        deliveryTime: undefined,
        customerId: undefined,
        userId: undefined,
        remark: undefined
      },
      rules: {
        orderCode: [
          { required: true, message: '合同号不能为空', trigger: 'blur' }
        ],
        customerId: [
          { required: true, message: '客户不能为空', trigger: 'blur' }
        ]
      },
      // 客户选择
      customers: [],
      // 接单人
      users: [],
      visible: false
    }
  },
  created () {
    // 获取客户列表
    getCustomerNames().then(response => {
      this.customers = response.data
    })
    getUserNames().then(response => {
      this.users = response.data
    })
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.formTitle = '添加订单信息'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      const orderId = row ? row.orderId : ids
      getOrder(orderId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改订单信息'
      })
    },
    // 表单重置
    reset () {
      this.form = {

      }
    },
    onClose () {
      this.open = false
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.orderId !== undefined) {
            updateOrder(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addOrder(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    checkSameOrderCode: function (e) {
      const query = {
        orderId: this.form.orderId,
        orderCode: this.form.orderCode
      }
      checkOrderCode(query).then(response => {
        if (response.data) {
          this.visible = true
        }
      })
    },
    handleOk (e) {
      var date = new Date()
      this.form.orderCode = this.form.orderCode + '-' + date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
      this.visible = false
    },
    handleCancel (e) {
      this.form.orderCode = undefined
      this.visible = false
    }
  }
}
</script>
